<!--
	课程管理下的--课程详情
	编辑课程
-->
<template>
	<el-form  :model="newCourse" label-width="120px">
		<el-form-item label="课程名称">
			<el-input v-model="newCourse.name"></el-input>
		</el-form-item>
		<el-form-item label="课程介绍">
			<el-input
				v-model="newCourse.description"
				:rows="3"
				type="textarea"
				placeholder="请输入课程介绍"
			/>
		</el-form-item>
		<el-form-item label="课程大纲">
			<el-input
				v-model="newCourse.syllabus"
				:rows="3"
				type="textarea"
				placeholder="请输入课程大纲"
			/>
		</el-form-item>
		<!-- 教师列表 start -->
		<el-form-item label="授课教师">
			<el-cascader-panel :options="allTeacherList" v-model="chooseTeacherList"
							   :props="{label:'name',children:'teacherList', multiple: true,value:'id'}" />
		</el-form-item>
		<!-- 教师列表 end -->
		<!-- 教师列表 start -->
		<el-form-item label="参与班级">
			<el-cascader-panel :options="allDepartmentSubjectClassList" v-model="chooseClassList"
							   :props="{label:'name', multiple: true,value:'id'}" />
		</el-form-item>
		<!-- 教师列表 end -->

		<el-form-item v-if="newCourse.id">
			<el-button type="primary" @click="onSubmit">修改</el-button>
			<el-button type="danger" @click="reset">取消</el-button>
		</el-form-item>
		<el-form-item v-else>
			<el-button type="primary" @click="onSubmit">新增</el-button>
			<el-button type="danger" @click="clearInfo">取消</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage} from "element-plus";

export default {
	name: "CourseInfo",
	props:["course"],
	data(){
		return {
			/*
			* 保存初始值
			* */
			newCourse:{},
			/*
			* 所有教师列表
			* */
			allTeacherList:[],
			/*
			* 选中的教师
			* */
			chooseTeacherList:[],
			/*
			* 所有学院专业班级数据
			* */
			allDepartmentSubjectClassList:[],
			/*
			* 选中的班级列表
			* */
			chooseClassList:[],
		}
	},
	methods:{
		/*
		* 这里使用工具类的方法，在递归时会找不到自己，所以在这定义，后面解决
		* */
		deepClone(obj){
			let result = Array.isArray(obj) ? [] : {};
			for (let key in obj) {
				if (typeof obj[key] === 'object' && obj[key] !== null) {
					result[key] = this.deepClone(obj[key]); //递归复制
				} else {
					result[key] = obj[key];
				}
			}
			return result;
		},
		/**
		 * 把数据还原到修改前
		 */
		reset(){
			this.newCourse=this.deepClone(this.course);
		},
		/**
		 * 清空数据
		 */
		clearInfo(){
			this.newCourse={};
		},
		/**
		 * 新增 或者 修改 课程
		 */
		onSubmit(){
			axios.post(ipconfig.address+"/course/addOrUpdateCourse",{
				...this.newCourse,
				chooseTeacherList:this.chooseTeacherList,
				chooseClassList:this.chooseClassList
			}).then((response)=>{
				if(response.data.code==200){
					location.reload();
				}else{
					ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
			    console.log(error);
			});
		}
	},
	mounted() {
		/*
		* 这里使用工具类的方法，在递归时会找不到自己，所以在这定义，后面解决
		* */
		let deepClone=(obj)=>{
			let result = Array.isArray(obj) ? [] : {};
			for (let key in obj) {
				if (typeof obj[key] === 'object' && obj[key] !== null) {
					result[key] = deepClone(obj[key]); //递归复制
				} else {
					result[key] = obj[key];
				}
			}
			return result;
		};
		// 通过id判断是新增还是修改
		if(!this.course.id){
			console.log("null")
		}else{
			// 将修改的数据保存到新值
			this.newCourse=deepClone(this.course);

			// 循环教师列表将选择的数据保存
			if(this.newCourse.teacherList&&this.newCourse.teacherList.length>0)
			for(let i=0;i<this.newCourse.teacherList.length;i++){
				const obj=new Proxy([this.newCourse.teacherList[i].departmentId,this.newCourse.teacherList[i].id],{});
				this.chooseTeacherList[i]=obj;
			}

			// 循环课程列表
			if(this.newCourse.classRelationshipList&&this.newCourse.classRelationshipList.length>0)
			for(let i=0;i<this.newCourse.classRelationshipList.length;i++){
				const obj=new Proxy([this.newCourse.classRelationshipList[i].departmentId,
					this.newCourse.classRelationshipList[i].subjectId,
					this.newCourse.classRelationshipList[i].classId],{});
				this.chooseClassList[i]=obj;
			}
		}

		// 这获取所有教师列表
		axios.get(ipconfig.address+"/course/departmentTeacherList").then((response)=>{
			if(response.data.code==200){
				this.allTeacherList=response.data.data;
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
		// 这获取学院专业班级数据
		axios.get(ipconfig.address+"/common/departmentSubejctClass").then((response)=>{
			if(response.data.code==200){
				this.allDepartmentSubjectClassList=response.data.data;
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
	}
}
</script>

<style scoped>

</style>